import React, { memo, useEffect, useState } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { getLook } from '../home/store/actionCreators'
import LookList from '../../components/LookList'
import { Pagination } from "antd";
export default memo(function App() {
    const { lookLists } = useSelector(
        (state) => ({
            lookLists: state.getIn(["home", "lookList"]),
        }),
        shallowEqual
    );
    const [page, setPage] = useState(1)
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getLook({
            category: 11,
            page: page,
            pageSize: 12,
        }));
    }, [page, dispatch]);
    const handleChange = (val) => {
        setPage(val)
    }
    return (
        <div className='w listPadding'>
            <LookList list={lookLists.list ? lookLists.list : []}></LookList>
            <div style={{ textAlign: 'center', marginTop: '20px' }}>
                <Pagination
                    defaultCurrent={page || 1}
                    current={typeof page == 'undefined' ? 1 : page}
                    defaultPageSize={12}
                    onChange={e => handleChange(e)}
                    total={lookLists.total}
                />
            </div>

        </div>
    );
});
